<template>
    <div class="transaction-detail-wrapper">
        <el-row style="width: 100%" :gutter="20">
            <el-col :span="16">
                <el-card class="mt-4 !border-none" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>售后详情</span>
                        </div>
                    </template>
                    <div class="itemContent">
                        <el-space>
                            <div class="w-120 label-title">售后编号：</div>
                            <div>
                                <span>{{ detail.afterSaleSn }}</span>
                            </div>
                        </el-space>
                        <el-space>
                            <div class="w-120 label-title">订单编号：</div>
                            <div>
                                <span>{{ detail.orderSn }}</span>
                            </div>
                        </el-space>
                        <el-space>
                            <div class="w-120 label-title">申请时间：</div>
                            <div>
                                <span>{{ detail.createTime }}</span>
                            </div>
                        </el-space>
                        <el-space>
                            <div class="w-120 label-title">售后原因：</div>
                            <div>
                                <span>{{ detail.reason }}</span>
                            </div>
                        </el-space>
                        <el-space>
                            <div class="w-120 label-title">售后图片：</div>
                            <div>
                                <el-space wrap v-if="detailImags">
                                    <div
                                        v-for="(fit, index) in detailImags"
                                        :key="index"
                                        class="block"
                                    >
                                        <el-image
                                            style="width: 100px; height: 100px"
                                            :src="fit"
                                            :fit="fit"
                                        />
                                    </div>
                                </el-space>
                            </div>
                        </el-space>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="mt-4 !border-none" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>售后状态: {{ afterSaleStatusMap[detail.status]?.label }}</span>
                        </div>
                    </template>
                    <div class="itemContent">
                        <el-space>
                            <div class="w-120 label-title">售后金额：</div>
                            <div>
                                <span>{{ detail.amount }}</span>
                            </div>
                        </el-space>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top: 20px" class="mt-4 !border-none" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>商品信息</span>
                </div>
            </template>
            <el-table size="large" :data="detail.afterSalesItems || []">
                <el-table-column label="产品名称" prop="goodsName" min-width="180" />
                <el-table-column label="规格" prop="specName" min-width="100"></el-table-column>
                <el-table-column label="单价" prop="salePrice" min-width="100"></el-table-column>
                <el-table-column label="数量" prop="quantity" min-width="100"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="transactionDetail">
import { getAfterSalesDetail } from '@/servers/order/api/supplyChainshouhouguanli'

const route = useRoute()

const afterSaleStatusMap: any = {
    1: {
        label: '待审核',
        icon: ''
    },
    2: {
        label: '平台已审核',
        icon: ''
    },
    3: {
        label: '等待用户发货/退款',
        icon: ''
    },
    4: {
        label: '用户已发货',
        icon: ''
    },
    5: {
        label: '退款成功',
        icon: ''
    }
}

const detail: any = ref({})
const getDetail = async () => {
    const res = await getAfterSalesDetail({
        id: route.query.id as any
    })
    detail.value = res
}

const detailImags = computed(() => {
    if (!detail.value.images) return []
    return detail.value.images.split(',')
})

getDetail()
</script>
<style lang="scss" scoped>
.transaction-detail-wrapper {
    width: 100%;
    .itemContent {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        ::v-deep .el-space {
            margin-bottom: 10px;
        }
    }
}
</style>
